<template>
  <div class="app-container">
    <el-tabs :active-name="tabs.activeTabName" @tab-click="switchTab">
      <el-tab-pane label="树视图(SNAPSHOT)" name="view1">
        <threadview1 ref="view1" :conn-name="connName" />
      </el-tab-pane>
      <el-tab-pane label="线程时间视图" name="view2">
        <threadview2 ref="view2" :conn-name="connName" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Threadview1 from '@/views/monitor/jvm/threadview/threadview1'
import Threadview2 from '@/views/monitor/jvm/threadview/threadview2'

export default {
  name: 'Thread',
  components: { Threadview2, Threadview1 },
  props: {
    connName: {
      type: String
    }
  },
  data() {
    return {
      tabs: {
        activeTabName: 'view1'
      }
    }
  },
  mounted() {

  },
  methods: {
    init() {
      this.switchTab({ name: this.tabs.activeTabName })
    },
    switchTab(tab) {
      this.tabs.activeTabName = tab.name
      this.$nextTick(() => {
        this.$refs[tab.name].init()
      })
    },
    refreshModel() {
      this.$nextTick(() => {
        if (this.tabs.activeTabName === 'view2') {
          const refreshModel = this.$refs.view2.refreshModel
          if (refreshModel && typeof (refreshModel) === 'function') {
            refreshModel()
          }
        }
      })
    }
  }
}
</script>


